<template>
  <div class="home">
    <div class="box1">
      <div class="w">
        <ul class="box_ul1">
          <li class="ssh" @click="dialogFormVisible1 = true">登录</li>
           <li>
            <el-popconfirm title="确定退出吗？" @confirm='del' >
              <el-button slot="reference" v-show="flag">欢迎{{username}}</el-button>
            </el-popconfirm>
          </li>
          <!-- 登录的对话框 -->
          <el-dialog title="登录" :visible.sync="dialogFormVisible1">
            <el-form
              :model="ruleForm1"
              :rules="rules1"
              ref="ruleFor1"
              label-width="70px"
              class="demo-ruleForm1"
            >
              <el-form-item prop="userName">
                <el-input
                  v-model="ruleForm1.userName"
                  prefix-icon="el-icon-user"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="ruleForm1.password"
                  prefix-icon="el-icon-view"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="login()">确 定</el-button>
            </div>
          </el-dialog>
          <li>|</li>
          <li class="ssh" @click="dialogFormVisible = true">注册</li>
          <!-- 注册的对话框 -->
          <el-dialog title="注册" :visible.sync="dialogFormVisible">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item prop="userName">
                <el-input
                  v-model="ruleForm.userName"
                  prefix-icon="el-icon-user"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="ruleForm.password"
                  prefix-icon="el-icon-view"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>

              <el-form-item prop="password1">
                <el-input
                  v-model="ruleForm.password1"
                  prefix-icon="el-icon-view"
                  placeholder="请再次输入密码"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="zc()">确 定</el-button>
            </div>
          </el-dialog>
          <li class="ssh" @click="$router.push('/order')">我的订单</li>
          <li class="ssh" @click="$router.push('/store')">我的收藏</li>
          <li class="gwc" @click="$router.push('/cate')">
            <i class="el-icon-shopping-cart-full"></i>
            购物车
          </li>
        </ul>
      </div>
    </div>
    <div class="box2">
      <div class="w">
        <div class="box3">
          <img src="/imgs/logo.png" alt="" />
          <ul class="box_ul">
            <li class="l2" v-for="(item, index) in arr" :key="index">
              <router-link :to="item.path"> {{ item.name }}</router-link>
            </li>
          </ul>
          <!-- 搜索框 -->
          <el-input
            placeholder="请输入内容"
            style="width: 300px"
            class="input-with-select"
            v-model="search"
          >
            <el-button slot="append" icon="el-icon-search" @click="ss()"></el-button>
          </el-input>
        </div>

        <div class="w">
          <router-view></router-view>
        </div>

        <!-- 底部 -->
        <div class="W">
          <footer>
            <ul class="footerul">
              <li class="footerli">
                <i class="el-icon-share"></i>
                7天无理由退换货
              </li>
              <li class="footerli">
                <i class="el-icon-share"></i>
                满99元全场免邮
              </li>
              <li class="footerli">
                <i class="el-icon-share"></i>
                100%品质保证
              </li>
            </ul>
            <p class="jing"></p>
            <p class="foo">首页 | 全部商品 | 关于我们</p>
            <p class="foo">商城版权所有 © 2012-2021</p>
          </footer>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { baanrList, getregister, getlogin } from "@/utils/api";
export default {
  data() {
    return {
      activeName: "",
      imglist: [], //存放轮播图图片
      dialogTableVisible: false, //注册对话框
      dialogFormVisible: false,
      dialogFormVisible1: false, //登录对话框
      username:'',    //本地存储的用户
      search:"",   // 搜索框内容
      flag:true,
      ruleForm: {
        userName: "",
        password: "",
        password1: "",
      },
      ruleForm1: {
        userName: "",
        password: "",
      },
      arr: [
        { name: "首页", path: "/home" },
        { name: "全部商品", path: "/goods" },
        { name: "关于我们", path: "/about" },
      ],
      // 注册对话框表单验证
      rules: {
        userName: [
          {
            pattern: /^[a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
        password: [
          {
            pattern: /^[a-zA-Z][a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
        password1: [
          {
            pattern: /^[a-zA-Z][a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
      },
      // 登录对话框表单验证
      rules1: {
        userName: [
          {
            pattern: /^[a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
        password: [
          {
            pattern: /^[a-zA-Z][a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getbaanr(); // 轮播图
    this.username = localStorage.getItem('username')
  },

  methods: {
    //  获取轮播图图片
    async getbaanr() {
      var res = await baanrList();
      console.log(res);
      this.imglist = res.data.carousel;
    },

    //注册
    async zc() {
      if (this.ruleForm.password != this.ruleForm.password1) {
        this.$notify({
          title: "两次密码不一致",
          type: "success",
        });
      }
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          this.$message.error("内容不合法");
          return false;
        }
      });
      var res = await getregister(this.ruleForm);
      console.log("注册", res);

      if (res.data.code == "004") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "001") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "002") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
        this.dialogFormVisible = false;
      }
    },
    // 登录 点击确定按钮是
    async login() {
      var res = await getlogin(this.ruleForm1);
      console.log("登录", res);

      if (res.data.code == "004") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "001") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
        this.dialogFormVisible1 = false;
        localStorage.setItem("userid", res.data.user.user_id);
     localStorage.setItem('username',res.data.user.userName)
        
      }
      if (res.data.code == "002") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
    },

    // 点击确定退出登录
    del(){
      localStorage.removeItem('username') 
      this.flag = false
    },

    //搜索
     ss(){
       var value = this.search
      this.$router.push(`/goods?value=`+value)
    }
  },
};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  background: white;
  box-sizing: border-box;
}
.box_ul,
.l2:hover {
  color: steelblue;
}
.box1 {
  width: 100%;
  height: 40px;
  background: #3d3d3d;
  color: #ccc;
  box-sizing: border-box;
}
.box2 {
  width: 1200px;
  height: 100%;
  margin: auto;
  // background: red;
  box-sizing: border-box;
}
.box_ul1 {
  float: right;
  width: 340px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 40px;
}
.ssh:hover {
  color: white;
}
.gwc:hover {
  background: white;
  color: orange;
}
.l2 {
  margin-left: 20px;
}
.l2:hover {
  color: steelblue !important;
}
.box3 {
  width: 100%;
  height: 60px;
  // background: pink;
  position: relative;
  border-bottom: #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.el-tabs {
  position: absolute;
  margin: -39px;
  left: 300px;
  top: 60px;
}
.input-with-select {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
}
.box_ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 70px;
}

footer {
  width: 100%;
  height: 300px;
  background: #2f2f2f;
  color: white;
  margin-top: 10px;
  .jing {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background: url()
      no-repeat;
  }
  .foo {
    font-size: 15px;
    margin-left: 500px;
    margin-top: 20px;
    color: #887d63;
  }

  .footerul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 19px;
    .footerli {
      line-height: 150px;
    }
  }
}
</style>